.app-center {
  min-height: 100%;
  padding: 0 20rpx;
}

.top-header {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 80px;
  width: 100%;
  background-image: linear-gradient(190deg, #d9e7fb 20%, #f0f3f8 40%);
  padding-left: 30rpx;
  z-index: 10001;

  /* margin-bottom: 30rpx; */
  /* background-image: linear-gradient(190deg, #d9e7fb 20%, #f0f3f8 40%); */
  .left-cancel {
    color: #3D7EFF;
    font-size: 32rpx;
  }

  .left-back text {
    font-size: 46rpx;
    font-weight: bold;
  }

  .cus-title {
    flex: 1;
    color: #313131;
    font-size: 38rpx;
    font-weight: bold;
    text-align: center;
  }

  .header-right {
    .save-btn {
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      background-color: #3465CC;
      border-radius: 20rpx;
    }

    .to-search text {
      color: #313131;
      font-size: 46rpx;
      font-weight: bold;
    }
  }
}

.home-set {
  position: relative;
  box-shadow: 0 2px 12px 0 ￼ rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
  margin-bottom: 20rpx;

  .save {
    position: absolute;
    top: 30rpx;
    right: 20rpx;
    color: #fff;
    font-size: 24rpx;
    padding: 6rpx 20rpx;
    background-color: #3465CC;
    border-radius: 20rpx;
  }

  .set-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    padding: 0 20rpx;

    .set-left {
      color: #313131;
      font-size: 26rpx;
      font-weight: bold;
    }

    .set-right {
      color: #fff;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      background-color: #3465CC;
      border-radius: 20rpx;
    }
  }

  .set-area {
    /* margin-bottom: 20rpx; */
    padding: 0 10px;

    .set-area-tip {
      padding: 50px 20px 20px;

      .tip-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200rpx;
        color: #909399;
        font-size: 26rpx;
        border: 2rpx dashed #909399;
      }
    }
  }

}

.menu-list {
  display: flex;
  flex-wrap: wrap;

  .menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 80px;

    .item-icon {
      position: absolute;
      right: 20rpx;
      top: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36rpx;
      height: 36rpx;
      border: 6rpx solid #fff;
      background-color: #3D7EFF;
      border-radius: 50%;

      text {
        color: #fff;
        font-size: 26rpx;
      }
    }

    .del {
      background-color: #8c8d90;
    }

    .item-img {
      width: 30px;
      height: 30px;
      margin-bottom: 10rpx;
    }

    .item-text {
      color: #313131;
      font-size: 24rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .menu-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;

    .menu-line {
      width: 40rpx;
      height: 2rpx;
      background: #f2f2f2;
    }

    .menu-tip-txt {
      font-size: 24rpx;
      color: #9a9a9a;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }
  }
}

.menu-part {
  margin-bottom: 30rpx;
  padding: 0 30rpx;
  box-shadow: 0 2px 12px 0 ￼ rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;

  .menu-title {
    display: flex;
    align-items: center;
    height: 80rpx;
    color: #331133;
    font-size: 26rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
}



.app-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  .bottom-line {
    width: 20rpx;
    height: 2rpx;
    background-color: #b7b7b7;
  }

  .bottom-text {
    font-size: 24rpx;
    color: #adadad;
    margin-left: 20rpx;
    margin-right: 20rpx;
  }
}